<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  


<style>
  /* 计算器容器样式 */  
.calculator {    
    width: 300px;           /* 宽度为300像素 */  
    height: 500px;          /* 高度为500像素 */  
    background-color: black;/* 背景颜色为黑色 */  
    display: flex;          /* 使用Flex布局 */  
    flex-direction: column; /* 主轴方向为列 */  
    align-items: right;    /* 子元素在交叉轴上居中对齐 */  
    justify-content: space-between; /* 子元素在主轴上均匀分布 */  
    padding: 10px;          /* 内边距为10像素 */  
    box-sizing: border-box; /* 使用边框盒模型 */  
  }  
    
  /* 显示屏样式 */  
  .display-panel {    
    /*overflow: hidden;*/
    height: 150px;                  /* 高度为150像素 */  
    line-height: 150px;             /* 行高与高度相同，实现垂直居中 */  
    font-size: 30px;                /* 字体大小为30像素 */  
    color: white;                   /* 文本颜色为白色 */  
    text-align: right;              /* 文本右对齐 */  
    padding: 0 10px;                /* 左右内边距为10像素 */  
    box-sizing: border-box;         /* 使用边框盒模型 */  
    background-color: rgba(0, 0, 0, 0.5); /* 背景颜色为半透明的黑色 */  
  }  
    
  /* 按钮面板样式 */  
  .button-panel {    
    display: grid;                  /* 使用Grid布局 */  
    grid-template-columns: repeat(4, 1fr); /* 定义四列，每列等宽 */  
    grid-gap: 15px;                  /* 列和行之间的间隙为15像素 */  
    row-gap: 15px;                  /* 行和行之间的间隙为15像素 */
  }  
    
  /* 通用按钮样式 */  
  .button {    
    width: 50px;                    /* 宽度为50像素 */  
    height: 50px;                   /* 高度为50像素 */  
    border: none;                   /* 无边框 */  
    border-radius: 50%;             /* 圆角半径为50%，即圆形按钮 */  
    color: white;                   /* 文本颜色为白色 */  
    font-size: 20px;                /* 字体大小为20像素 */  
    display: flex;                  /* 使用Flex布局 */  
    align-items: center;            /* 子元素在交叉轴上居中对齐 */  
    justify-content: center;        /* 子元素在主轴上居中对齐 */  
    cursor: pointer;                /* 鼠标悬停时显示手形图标 */  
    background-color: #808080;      /* 背景颜色为灰色 */  
  }  
    
  /* 橙色按钮样式 */  
  .button.orange {    
    background-color: orange;       /* 背景颜色为橙色 */  
  }  
    
  /* 按钮被点击时的样式 */  
  .button:active {    
    filter: brightness(1.2);        /* 亮度提高1.2倍 */  
  }  
    
  /* 特殊按钮样式（AC, Back, +/-） */  
  .button.special {    
    border-radius: 5px;             /* 圆角半径为5像素，即方形按钮 */  
  }  
    
  /* 为第一行前三个按钮添加样式 */  
  /* 注意：由于此选择器使用了直接子元素选择器 > 和伪类 :nth-child(-n+3)，  
     需要确保.button是.button-panel的直接子元素，且选择器可能需要根据实际HTML结构调整 */  
  .button-panel > button:nth-child(-n+3) {    
    background-color: rgb(169, 169, 169); /* 背景颜色为浅灰色 */  
    border-radius: 50%;               /* 圆角半径为5像素，即方形按钮 */  
  }  
    
  /* 为第四列按钮添加样式 */  
  /* 注意：由于Grid布局和按钮的排列方式，这个选择器可能需要根据实际HTML结构调整 */  
  .button-panel > button:nth-child(4n) {    
    background-color: orange;        /* 背景颜色为橙色 */  
  }  
    
  /* 为0按钮添加样式 */  
  /* 注意：这个选择器假设.button是.button-panel的直接子元素，并且0按钮是倒数第二个子元素  
     如果HTML结构不同，这个选择器可能需要调整 */    
  .button-panel > button:nth-last-child(3) {  
    border-radius: 30px; /* 0 是椭圆形 */ 
    grid-column: span 2; 
    width: 120px
  }
</style>
<title>樊慧玲的计算器</title>  
</head>  
<body>  
<div class="calculator">  
  <div class="display-panel" id="display">0</div>  
  <div class="button-panel">   
    <button class="button" onclick="handleButton('AC')">AC</button>  
    <button class="button" onclick="handleButton('Back')">Back</button>  
    <button class="button" onclick="handleButton('+/-')">+/-</button> 
    <button class="button " onclick="handleButton('/')">/</button>
    <button class="button " onclick="handleButton('7')">7</button>
    <button class="button " onclick="handleButton('8')">8</button> 
    <button class="button " onclick="handleButton('9')">9</button>
    <button class="button " onclick="handleButton('*')">*</button> 
    <button class="button " onclick="handleButton('4')">4</button>
    <button class="button " onclick="handleButton('5')">5</button>
    <button class="button " onclick="handleButton('6')">6</button>
    <button class="button " onclick="handleButton('-')">-</button>
    <button class="button " onclick="handleButton('1')">1</button>
    <button class="button " onclick="handleButton('2')">2</button>
    <button class="button " onclick="handleButton('3')">3</button>
    <button class="button " onclick="handleButton('+')">+</button>
    <button class="button " onclick="handleButton('0')">0</button>
    <button class="button " onclick="handleButton('.')">.</button>
    <button class="button " onclick="handleButton('=')">=</button>  
  </div>  
</div>  
<script>

let display = document.getElementById('display');    
let expression = '0'; // 初始表达式设为'0'  
  
// 更新显示区域  
function updateDisplay(value) {    
  display.textContent = value;    
  expression = value; // 更新表达式  
}  
  
// 处理数字按钮点击  
function handleNumber(buttonValue) {  
  if (expression === '0' && buttonValue !== '.') {  
    updateDisplay(buttonValue);  
  } else if (!expression.includes('.') || expression.slice(-1) !== '.') {  
    updateDisplay(expression + buttonValue);  
  }  
}  
  
// 处理运算符和特殊按钮  
function handleOperatorOrSpecial(buttonValue) {  
  switch (buttonValue) {  
    case 'AC':  
      updateDisplay('0');  
      break;  
    case 'Back':  
      if (expression.length > 1) {  
        updateDisplay(expression.slice(0, -1));  
      }  
      break;  
    case '+/-':  
      if (/^\d+(\.\d+)?$/.test(expression)) { // 检查表达式是否只包含数字  
        updateDisplay(expression[0] === '-' ? expression.slice(1) : '-' + expression);  
      }  
      break;  
    case '=':  
      try {  
        // 这里只是一个简单的例子，你可能需要实现一个更复杂的表达式解析器  
        let result = calculateExpression(expression);  
        updateDisplay(result.toFixed(6));  
      } catch (e) {  
        updateDisplay('Error');  
      }  
      break;  
    default:  
      if (expression !== '0' || buttonValue === '-') {  
        updateDisplay(expression + buttonValue);  
      }  
      break;  
  }  
}  
    
function calculateExpression(expr) {   
  const parts = expr.split(/([+\-*/])/);  
  let result = parseFloat(parts[0]);  
  for (let i = 1; i < parts.length; i += 2) {  
    const num = parseFloat(parts[i + 1]);  
    const op = parts[i];  
    switch (op) {  
      case '+':  
        result += num;  
        break;  
      case '-':  
        result -= num;  
        break;  
      case '*':  
        result *= num;  
        break;  
      case '/':  
        if (num !== 0) {  
          result /= num;  
        } else {  
          throw new Error('Division by zero');  
        }  
        break;  
    }  
  }  
  return result;  
}  
  
// 绑定按钮的点击事件  
document.querySelectorAll('.button').forEach(button => {  
  button.addEventListener('click', () => {  
    const buttonValue = button.textContent;  
    if (!isNaN(buttonValue)) {  
      handleNumber(buttonValue);  
    } else {  
      handleOperatorOrSpecial(buttonValue);  
    }  
  });  
});

</script>
</body>  
</html>